/**
 * 所有的路由配置页面
 */
import React from 'react';
import {
  Dimensions,
  View,
  Image,
  ScrollView,
} from 'react-native';

import {
  StackNavigator,
  TabNavigator,
  TabBarBottom,
  NavigationActions,
  DrawerNavigator,
  DrawerItems,
} from 'react-navigation';
import COLOR_CONFIG from './configs/colorConfig';
import NAVIGATION_OPTIONS_CONFIG from './configs/navigationOptionsConfig';

// <<----------------------------------------------------------------------------->>

import About from './routes/About';
import Me from './routes/Me';

// <<-----------------------------------Components-------------------------------->>
import Home from './routes/Home';
import ButtonPage from './routes/Pages/Button';
import SpinnerPage from './routes/Pages/Spinner';
import NavBarPage from './routes/Pages/NavBar';
import ActionSheetPage from './routes/Pages/ActionSheet';
import HTextPage from './routes/Pages/HText';
import BadgePage from './routes/Pages/Badge';
import RootSiblingsPage from './routes/Pages/RootSiblings';
import ToastPage from './routes/Pages/Toast';
import SegmentedControlPage from './routes/Pages/SegmentedControl';
import ScrollableTabViewPage from './routes/Pages/ScrollableTabView';
import ScrollableFullTabViewPage from './routes/Pages/ScrollableFullTabView';
import PopOverPage from './routes/Pages/PopOver';
import ModalPage from './routes/Pages/Modal';
import GalleryPage from './routes/Pages/Gallery';

// <<----------------------------------------------------------------------------->>
const SCREEN_SIZE = Dimensions.get('window');

// 左侧抽屉
const Drawer = DrawerNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.Home,
    },
    HTextPage: {
      screen: HTextPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.HTextPage,
    },
    ButtonPage: {
      screen: ButtonPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.ButtonPage,
    },
    SpinnerPage: {
      screen: SpinnerPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.SpinnerPage,
    },
    NavBarPage: {
      screen: NavBarPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.NavBarPage,
    },
    ActionSheetPage: {
      screen: ActionSheetPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.ActionSheetPage,
    },
    BadgePage: {
      screen: BadgePage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.BadgePage,
    },
    RootSiblingsPage: {
      screen: RootSiblingsPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.RootSiblingsPage,
    },
    ToastPage: {
      screen: ToastPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.ToastPage,
    },
    SegmentedControlPage: {
      screen: SegmentedControlPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.SegmentedControlPage,
    },
    ScrollableTabViewPage: {
      screen: ScrollableTabViewPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.ScrollableTabViewPage,
    },
    PopOverPage: {
      screen: PopOverPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.PopOverPage,
    },
    ModalPage: {
      screen: ModalPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.ModalPage,
    },
    GalleryPage: {
      screen: GalleryPage,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.GalleryPage,
    },
  },
  {
    initialRouteName: 'ModalPage',
    contentOptions: {
      activeTintColor: COLOR_CONFIG.default,
      inactiveTintColor: 'black',
    },
    drawerWidth: 0.7 * SCREEN_SIZE.width,
    contentComponent: (props) => (
      <View style={{ flex: 1 }}>
        <Image
          source={{ uri: 'http://qiniu.enjoymemory.cn//image/background2.png' }}
          style={{
            height: 170,
            width: '100%',
            resizeMode: 'stretch',
            marginBottom: 0,
          }}
        />
        <ScrollView
          showsVerticalScrollIndicator={false}>
          <DrawerItems
            {...props}
          />
        </ScrollView>
      </View>
    ),
  },
);

const Tab = TabNavigator(
  {
    Components: {
      screen: Drawer,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.Drawer,
    },
    About: {
      screen: About,
      navigationOptions: NAVIGATION_OPTIONS_CONFIG.About,
    },
  },
  {
    initialRouteName: 'Components',
    tabBarComponent: TabBarBottom,
    swipeEnabled: false,
    tabBarPosition: 'bottom',
    animationEnabled: false, // 切换tab的时候，是否会有切换动画
    lazy: true,
    tabBarOptions: {
      initialRouteName: 'About',
      activeTintColor: COLOR_CONFIG.default,
      inactiveTintColor: '#000',
      activeBackgroundColor: '#fff',
      inactiveBackgroundColor: '#fff',
      showLabel: true,
      style: {
        borderTopWidth: 0,
        elevation: 35,
      },
    },
  },
);

const AppNavigator = StackNavigator(
  {
    Root: {
      screen: Tab,
    },
    Me: {
      screen: Me,
      navigationOptions: {
        title: '我自己',
      },
    },

    ScrollableFullTabViewPage: {
      screen: ScrollableFullTabViewPage,
    },
  },
  {
    initialRouteName: 'Root',
    // float: Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
    // screen： Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
    headerMode: 'none', // 'float' || 'screen' || 'none'
    mode: 'card',  // Defines the style for rendering and transitions: 'card' || 'modal', modal only workds in IOS
    navigationOptions: {
      gesturesEnabled: true, // 允许手势操作页面，进行路由转换
    },
  },
);

export default AppNavigator;
